<template>
    <div class="CommunicationAterList">
        <el-popover
        placement="bottom"
        width="auto"
        trigger="click">
        <!-- 已沟通过 -->
        <div v-if="listEvaluateData.rows !== undefined && model == 1" v-loading="loading">
            <div v-if="listEvaluateData.rows.length == 0" style="width: 300px; margin: 0 auto;">没有面试沟通记录</div>
            <div style="width: 300px;"></div>
            <ul class="CommunicationAterList-message" v-if="listEvaluateData.rows.length>0">
                <li class="row" v-for="(item, index) in listEvaluateData.rows" :key="index">
                    <div class="flex-grow-1">
                        <div>{{item.fromUsername}} 给 <br/>{{item.toUsername}} <br/>发起了视频面试</div>
                        <div style="font-size:12px; color: #ccc;">接通时间：{{item.createTime}}</div>
                    </div>
                    <div style="margin-left: 15px; padding-top: 20px;">
                        <el-tag type="success">已接通</el-tag>
                    </div>
                </li>
            </ul>
            <div style="text-align: center;">
                <el-pagination
                    layout="prev, pager, next"
                    :pager-count="3"
                    :page-size="5"
                    @current-change="handleChangeCurrent"
                    :total="listEvaluateData.total">
                </el-pagination>
            </div>
        </div>

        <!-- 未接通 -->
        <div v-if="listEvaluateData.rows !== undefined && model == 2" v-loading="loading">
            <div v-if="listEvaluateData.rows.length == 0" style="width: 300px; margin: 0 auto;">没有未接通记录</div>
            <div style="width: 300px;"></div>
            <ul class="CommunicationAterList-message" v-if="listEvaluateData.rows.length>0">
                <li class="row" v-for="(item, index) in listEvaluateData.rows" :key="index">
                    <div class="flex-grow-1">
                        <div>{{item.fromUsername}} 给 <br/>{{item.toUsername}} <br/>发起了视频面试</div>
                        <div style="font-size:12px; color: #ccc;">接通时间：{{item.createTime}}</div>
                    </div>
                    <div style="margin-left: 15px; padding-top: 20px;">
                        <el-tag type="warning">未接通</el-tag>
                    </div>
                </li>
            </ul>
            <div style="text-align: center;">
                <el-pagination
                    layout="prev, pager, next"
                    :pager-count="3"
                    :page-size="5"
                    @current-change="handleChangeCurrent"
                    :total="listEvaluateData.total">
                </el-pagination>
            </div>
        </div>

        <!-- 已拒绝 -->
        <div v-if="listEvaluateData.rows !== undefined && model == 3" v-loading="loading">
            <div v-if="listEvaluateData.rows.length == 0" style="width: 300px; margin: 0 auto;">没有拒接记录</div>
            <div style="width: 300px;"></div>
            <ul class="CommunicationAterList-message" v-if="listEvaluateData.rows.length>0">
                <li class="row" v-for="(item, index) in listEvaluateData.rows" :key="index">
                    <div class="flex-grow-1">
                        <div>{{item.fromUsername}} 给 <br/>{{item.toUsername}} <br/>发起了视频面试</div>
                        <div style="font-size:12px; color: #ccc;">接通时间：{{item.createTime}}</div>
                    </div>
                    <div style="margin-left: 15px; padding-top: 20px;">
                        <el-tag type="danger">己拒接</el-tag>
                    </div>
                </li>
            </ul>
            <div style="text-align: center;">
                <el-pagination
                    layout="prev, pager, next"
                    :pager-count="3"
                    :page-size="5"
                    @current-change="handleChangeCurrent"
                    :total="listEvaluateData.total">
                </el-pagination>
            </div>
        </div>
        <div slot="reference" v-if='model==1'>
            <el-badge  
            type="primary"
            :hidden="listEvaluateData.rows.length == 0"
            :value="listEvaluateData.rows.length">
                <p>{{text}}</p>
            </el-badge>
        </div>

        <div slot="reference" v-if='model==2'>
            <el-badge  
            type="warning"
            :hidden="listEvaluateData.rows.length == 0"
            :value="listEvaluateData.rows.length">
                <p>{{text}}</p>
            </el-badge>
        </div>

        <div slot="reference" v-if='model==3'>
            <el-badge  
            :hidden="listEvaluateData.rows.length == 0"
            :value="listEvaluateData.rows.length">
                <p>{{text}}</p>
            </el-badge>
        </div>
            
        </el-popover>
    </div>
</template>

<script>
import sock from "@/common/socket";
export default {
  props: ['text', 'model'], //model 1:已沟通过；2:未接通；3:已拒绝；
  mounted(){
    this.init();
    this.info();
    this.listEvaluate()
  },
  methods:{
      init(){
        if(this.model == 1){
            this.request = 'getEvaluate';
            this.return = 'listEvaluate';
        }else if(this.model == 2){
            this.request = 'getInterviewHistory';
            this.return = 'listInterviewHistory';
        }else if(this.model == 3){
            this.request = 'getRejectHistory';
            this.return = 'listRejectHistory';
        }
      },
      info(page=this.page){
        
        sock.emit(this.request,{
            pageNumber: page,
            pageSize: this.number,
            userId: this.userId,
        })
      },
      listEvaluate(){
        sock.on(this.return,(res)=>{
          this.loading = true;
          this.listEvaluateData = res;
          console.log(res,'-------------------------')
          setTimeout(()=>{
            this.loading = false;
          },500)
        })
      },
      handleChangeCurrent(page){
        this.page = page;
        this.info();
      }
  },
  data(){
      return {
          page: 1,
          number: 5,
          userId: this.$store.state.home.globalUserInfo.userId,
          listEvaluateData: {},
          loading: false,
          request: '',
          return: ''
      }
  }
}
</script>

<style lang="less">
.CommunicationAterList-message li{
  padding: 14px 0px; border-bottom: 1px solid #e8e8e8;
}
</style>
